<template>
  <div class="dashboard-container">
    <div class="app-container">

      <!-- 放置表格和分页 -->
      <el-card v-loading="loading">
        <el-tabs v-model="focusTab" @tab-click="changeFocusTab">
          <!-- 放置页签 -->
          <el-tab-pane v-if="checkPermission('api-lendlist-get')" name="1" label="待审核设备">
            <EquipTableList ref="equipListRef1" :focus-tab="focusTab" tabname="1" />
          </el-tab-pane>
          <el-tab-pane v-if="checkPermission('api-lendlist-get')" name="2" label="整体设备租借管理">
            <EquipTableList ref="equipListRef2" :focus-tab="focusTab" tabname="2" />
          </el-tab-pane>
          <!-- 放置页签 -->
          <el-tab-pane name="3" label="个人设备租借">
            <el-table border :data="myequiplist">
              <el-table-column type="index" label="序号" width="100" />
              <el-table-column label="名称" prop="name" />
              <el-table-column label="租借原因" prop="reason" />
              <el-table-column label="租借人" prop="student" />
              <el-table-column label="租借进度">
                <template slot-scope="scope">
                  <el-tag :type="getStatus(scope.row.progress).type">{{ getStatus(scope.row.progress).label }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="租借时间" prop="lendtime" />
              <el-table-column label="归还时间">
                <template slot-scope="scope">
                  <span v-if="scope.row.returntime||scope.row.progress!==1">{{ scope.row.returntime }}</span>
                  <el-tag v-else-if="latedReturn(scope.row) <= 0" type="warning">待归还，余剩{{ -latedReturn(scope.row) }}天</el-tag>
                  <el-tag v-else type="danger">已逾期{{ latedReturn(scope.row) }}天</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" sortable="">
                <template slot-scope="scope">
                  <el-button :disabled="!checkPermission('api-lenddetail-get')" type="text" size="small" @click="$router.push(`equip/lendequip?id=${scope.row.lendid}&isCheck=1`)">查看</el-button>
                  <el-button v-if="scope.row.progress===1||scope.row.progress===-2" type="text" size="small" @click="showReturnEquip(scope.row)">归还</el-button>
                  <el-button v-if="scope.row.progress===0||scope.row.progress===-1" :disabled="!checkPermission('api-lend-put')" type="text" size="small" @click="delLend(scope.row.lendid)">取消借用</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-dialog close-on-click-modal :title="'请上传'+returnRow.name+'归还的照片'" :visible="showDialog" :show-close="false">
          <UploadFile ref="uploadRef" :objtype="'obj'" :photo-list="photoList" :objid="returnRow.name+'return'" @changeFileList="changeFileList" />
          <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
          <el-row slot="footer" type="flex" justify="center">
            <!-- 列被分为24 -->
            <el-col :span="6">
              <el-button type="primary" size="small" @click="returnEquip">确定</el-button>
              <el-button size="small" @click="closeDialog">取消</el-button>
            </el-col>
          </el-row>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEquipHistoryByProgress, lendHistoryByStudent, delLend, returnEquip } from '@/api/equip'
import EquipTableList from './equipTableList.vue'

export default {
  components: {
    EquipTableList
  },
  data() {
    return {
      searchItem: {
        progress: '',
        student: '',
        name: ''
      },
      focusTab: '1',
      returnRow: {},
      photoList: [],
      showDialog: false,
      loading: false,
      equiplist: [], // 接数据的
      myequiplist: [],
      page: {
        page: 1, // 当前页码
        size: 5,
        total: 0 // 总数
      },
      items: [
        { type: '', label: '租借待审核', progress: 0 },
        { type: 'success', label: '借用中', progress: 1 },
        { type: 'warning', label: '归还待审核', progress: 2 },
        { type: 'info', label: '已结束', progress: 3 },
        { type: 'danger', label: '租借审核未通过', progress: -1 },
        { type: 'danger', label: '归还审核未通过', progress: -2 }
      ]
    }
  },
  mounted() {
    const TableList = this.$refs['equipListRef1']
    TableList.getListData()
  },
  methods: {
    changeFocusTab(val) {
      this.focusTab = val.name
      if (val.name !== '3') {
        const TableList = this.$refs['equipListRef' + val.name]
        TableList.getListData(null, this.focusTab)
      } else {
        this.lendHistoryByStudent()
      }
    },
    changeFileList(val) {
      this.photoList = val
    },
    changePage(newPage) {
      this.page.page = newPage
      this.getEquipHistoryByProgress()
    },
    searchHandle() {
      const searchItem = {}
      for (const key in this.searchItem) {
        if (this.searchItem[key] !== '') {
          searchItem[key] = this.searchItem[key]
        }
      }
      this.getEquipHistoryByProgress(searchItem)
    },
    async getEquipHistoryByProgress(searchItem) {
      this.loading = true
      const { total, rows } = await getEquipHistoryByProgress(this.page.page, this.page.size, searchItem)
      this.page.total = total
      this.equiplist = rows
      this.loading = false
    },
    async lendHistoryByStudent() {
      const rows = await lendHistoryByStudent(this.$store.getters.studentname)
      this.myequiplist = rows
    },
    delLend(id) {
      this.$confirm('确定要删除该记录吗').then(() => {
        // 如果点击了确定就会进入then
        return delLend(id) // 返回promise对象
      }).then(() => {
        this.$message.success('删除成功')
        this.getEquipHistoryByProgress()
        this.lendHistoryByStudent()
      })
    },
    getStatus(progress) {
      return this.items.find(val => val.progress === progress)
    },
    returnEquip() {
      if (this.photoList.length === 0 && this.$refs.uploadRef.getHasUploadFiles().length === 0) {
        this.$message.error('请上传归还设备的照片')
        return
      }
      this.$confirm('确定申请归还该设备吗').then(() => {
        // 如果点击了确定就会进入then
        return returnEquip(this.returnRow.lendid, this.returnRow.id) // 返回promise对象
      }).then(() => {
        this.$message.success('申请归还成功')
        this.getEquipHistoryByProgress()
        this.lendHistoryByStudent()
        this.showDialog = false
      })
    },
    showReturnEquip(row) {
      this.returnRow = row
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs.uploadRef.getObjImg(row.name + 'return')
      })
    },
    closeDialog() {
      this.$refs.uploadRef.resetUploadFiles()
      this.showDialog = false
    },
    latedReturn(row) {
      const limit = Number(row.timelimit)
      const lendDate = new Date(row.lendtime)
      const nowDate = new Date()
      const lendedtime = Math.floor((nowDate.getTime() - lendDate.getTime()) / (24 * 3600 * 1000))
      return lendedtime - limit
    }
  }
}
</script>

<style>
</style>
